<template>
	<!-- 通风 -->
	<div class="flex-col h100">
		<my-box title="总览" class="top"> <List :data="data" /></my-box>
		<my-box class="f1 h0 m-t-10" title="风机风速与风量">
			<my-table
				:columns="[
					{
						label: '名称',
						prop: 'fanName'
					},
					{
						label: '风速',
						prop: 'windSpeed'
					},
					{
						label: '风量',
						prop: 'windCount'
					}
				]"
				:data="list1"
			/>
		</my-box>
		<my-box title="风机运行状态" class="f1 h0 m-t-10">
			<my-table
				height="200"
				:columns="[
					{
						label: '名称',
						prop: 'fanName'
					},
					{
						label: '1#风机',
						prop: 'fanState1',
						align: 'center'
					},
					{
						label: '2#风机',
						prop: 'fanState2',
						align: 'center'
					}
				]"
				:data="list2"
			>
				<template #fanState1="{ row }">
					<span class="st" :style="{ 'background-color': row.fanState1 == 0 ? '#3AB973' : '#E76060' }"></span
				></template>
				<template #fanState2="{ row }"><span class="st" :style="{ 'background-color': row.fanState2 == 0 ? '#3AB973' : '#E76060' }"></span></template>
			</my-table>
		</my-box>
	</div>
</template>

<script setup>
import { hourlyFan, venhourlyTransport, fanRunState } from '@a/home'
import List from './component/List.vue'

let data = ref([
	{ name: '总进风量', subname: 'Air intake', value: 178, unit: 'm³/min', icon: 'zongjinfengliang' },
	{ name: '总排水量', subname: 'Exhaust air', value: 2378, unit: 'm³/min', icon: 'zongpaifengliang' },
	{ name: '总回风量', subname: 'Return air', value: 1278, unit: 'm³/min', icon: 'zonghuifengliang' },
	{ name: '有效风量', subname: 'Effective wind', value: 1122, unit: 'm³/min', icon: 'youxiaofengliangbiankuang' }
])
// 近24小时排风量
// hourlyFan().then(res=>{
// data[0].value = ;
// data[1].value =;
// data[2].value = ;
// data[3].value = ;
// })

// 风机风速与风量
let list1 = ref([])
venhourlyTransport().then((res) => {
	list1.value = res.data
})
// 风机运行状态
let list2 = ref([])
fanRunState().then((res) => {
	list2.value = res.data
})
</script>

<style lang="scss" scoped>
.all {
	.item {
		height: 48px;
		border-radius: 2px;
		background: #030f27;
		box-sizing: border-box;
		border: 1px solid rgba(76, 107, 209, 0.5);
		box-shadow: inset 0px 0px 12px 0px #3468d8;
		&:not(:first-child) {
			margin-top: 10px;
		}
	}
}
.length {
	color: #397bfd;
	font-size: 14px;
	font-weight: bold;
	margin-left: 4px;
}
:deep(.el-progress__text) {
	color: #fff;
}
.st {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
</style>
